<template>
  <div class="home">
    <div class="h1">熊猫书屋</div>
    <div class="recommend">
      <!-- <div class="title-block">
        <span class="label"></span>
        <span class="text">熊猫推荐</span>
      </div> -->
      <div class="list">
        <div class="item" v-for="item in books" :key="item.id"  @click="goToDetail(item)">
          <div class="cover">
            <img :src="item.cover_path" alt="封面">
          </div>
          <div class="info">
            <div class="title">{{ item.title }}</div>
            <div class="author">{{ item.author }}/{{ item.type_name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getRecommendedBooks } from '@/api/books';
import { recordWebsiteVisit } from '@/api/website';

const router = useRouter();
const books = ref([]);
const loading = ref(false);
const finished = ref(true);

// 加载推荐书籍
const loadRecommendedBooks = async () => {
  try {
    loading.value = true;
    const response = await getRecommendedBooks();
    console.log(import.meta.env, 'import.meta.env');
    response.data.forEach((item) => {
      item.cover_path = item.cover_path.replace('public/cover', import.meta.env.VITE_FILE_COVER);
    });
    books.value = response.data;
    finished.value = true;
  } catch (error) {
    console.error("获取推荐书籍失败:", error);
  } finally {
    loading.value = false;
  }
};

// 跳转到书籍详情页
const goToDetail = (item) => {
  router.push(`/book/${item.id}`);
};

// 记录访问量
const recordVisit = async () => {
  try {
    await recordWebsiteVisit();
  } catch (error) {
    console.error("记录访问量失败:", error);
  }
};

onMounted(() => {
  recordVisit();
  loadRecommendedBooks();
});
</script>

<style lang="scss" scoped>
.home {
  .h1 {
    color: $primary-color;
    text-align: center;
    font-size: 20px;
    padding: 16px;
  }

  .recommend {
    .title-block {
      padding: 14px;
      .label {
        display: inline-block;
        width: 4px;
        height: 18px;
        background-color: $primary-color;
        margin-right: 6px;
        vertical-align: middle;
      }
      .text {
        font-size: 16px;
        vertical-align: middle;
      }
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 32px;
    .item {
      width: 125px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 16px;
      .cover {
        width: 106px;
        height: 132px;
        padding: 4px 2px;
        margin-bottom: 6px;
        box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .info {
        text-align: center;
        line-height: 14px;
        padding: 0 4px;
        box-sizing: border-box;
        .title {
          color: $main_color;
          font-size: 14px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          line-height: 16px;
          margin-bottom: 6px;
        }
        .author {
          font-size: 12px;
          color: #999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          line-height: 16px;
        }
      }
    }
  }
}
</style>
